<!DOCTYPE html>
<html>
<head>
    <title>课程情况 - {$site_info.site_name|default=''}</title>
    <meta name="keywords" content="" />
    <meta name="description" content="">
    <include file="public@head"/>
    <link href="__TMPL__/public/html_assets/css/seatcss.css" rel="stylesheet">
    <style>
        div.seatCharts-seat.focused {background-color: #fff;border: none;color:#999;}
    </style>
</head>
<body class="body-white">
<include file="public@nav" />
<div class="container tc-main">
    <div class="row">
        <div class="col-md-3">
            <include file="public@jiaxiaonav" />
        </div>
        <div class="col-md-9">
            <!--标题 -->
            <div class="personal-nav">
                <h2>课表安排</h2>
            </div>
            <!--标题 -->

            <!--课表情况 -->
            <div class="personal-class">
                <ul>
                    <li>
                        <dl class="list">
                            <!--<dt>情况：</dt>-->
                            <foreach name="data" item="vo">
                                <if condition="$vo.status eq 1">
                                    <dd class="notbegin" title="未上课程">
                                        <span class="title">课时{$vo.schedule}</span>
                                        <span class="date">{:date('Y-m-d ',$vo.date)}</span>
                                        <span class="time">{$vo.start_time}~{$vo.end_time}</span>
                                    </dd>
                                <else/>
                                    <dd title="已上课程">
                                        <span class="title">课时{$vo.schedule}</span>
                                        <span class="date">{:date('Y-m-d ',$vo.date)}</span>
                                        <span class="time">{$vo.start_time}~{$vo.end_time}</span>
                                    </dd>
                                </if>
                            </foreach>
                        </dl>
                    </li>
                </ul>
            </div>


            <div class="clear"></div>


            <div class="personal-nav">
                <h2>座位信息</h2>
            </div>
            <!--标题 -->

            <div class="row" style="font-family:iconfont;">
                <!--选座位 -->
                <div class="order-seat" style="width:100%;">
                    <!--黑板 -->
                    <div class="blackboard"><img src="__TMPL__/public/html_assets/images/heiban.jpg" /></div>
                    <!--黑板 -->

                    <!--座位 -->
                    <div id="seat-map">

                    </div>

                    <!--座位 -->
                </div>
                <div id="legend"  >
                    <id id="choose">
                        已选座位:
                        <span></span>
                    </id>
                </div>
            </div>


        </div>
        <!-- /container -->
    </div>

</div>

<include file="public@footer" />
<include file="public@scripts" />

<script src="__STATIC__/js/jquery.seat-charts.min.js"></script>
<script>
    $(document).ready(function () {
        set_seat();
        $('.seatCharts-seat').html('&#xe612;').css('cursor','not-allowed');
        set_column();

//   设置列数为字母
        function set_column() {
            var obj=$('.seatCharts-header>.seatCharts-cell:not(:first)');
            var length=obj.length;
            for (var i=0;i<length;i++){
                if(obj[i].innerHTML>26){
                    console.log('超出最大列数Z(26)');
                    return false;
                }else{
                    obj[i].innerHTML=String.fromCharCode(parseInt(obj[i].innerHTML)+64);
                }
            }
        }


        function set_seat() {
            var row = {$seat_data[0]['rows']};
            var column = {$seat_data[0]['cols']};
            var aisle = "{$seat_data[0]['aisle']}";
            var this_student_seat="{$seat_data[0]['this_student_seat']}";
            if(aisle) aisle=aisle.split(',');
            var vip = "{$seat_data[0]['vip']}";
            if(vip) vip=vip.split(',');
            var student_seat = "{$seat_data[0]['student_seat']}";
            if(student_seat) student_seat=student_seat.split(',');
            var reserved_seats = "{$seat_data[0]['reserved_seats']}";
            if(reserved_seats) reserved_seats=reserved_seats.split(',');
            var new_map = [];
            if (row && column) {
                //根据行列初步生成座位表的map
                for (var i = 0; i < row; i++) {
                    new_map[i] = '';
                    for (var j = 0; j < column; j++) {
                        new_map[i] += 'a';
                    }
                }
            }

            sc = $('#seat-map').seatCharts({
                map: new_map,
                naming: {
                    top: true,
                    getLabel: function (character, row, column) {
                        return column;
                    }
                },
                legend: { //定义图例
                    node: $('#legend'),
                    items: [
                        ['a', 'available', '可选座位'],
                        ['a', 'selected', '已选座位'],
                        ['a', 'unavailable', '已售座位'],
                        ['a', 'parentseats', '家长座位']
                    ]
                },
                click: function () {
                    return this.style();
                }
            });

            if(aisle){
                sc.get(aisle).status('aisles');
            }
            if(vip){
                sc.get(vip).status('parentseats');
            }
            if(student_seat){
                sc.get(student_seat).status('unavailable');
            }
            if(reserved_seats){
                sc.get(reserved_seats).status('unavailable');
            }
            if(this_student_seat){
                sc.get(this_student_seat).status('selected');

                $('#choose>span').text(
                    this_student_seat.split('')[0]+'排'
                    + String.fromCharCode(parseInt(this_student_seat.split('')[2])+64)+'座');
            }
        }


        $('#select_child').click(function () {
            $('.hoverul').hide();
            Wind.use('noty',function () {
                noty({
                    text: "此处不支持切换孩子,请到上一级菜单操作",
                    type: 'error',
                    layout: 'center',
                    modal: true,
                });
            })
        });


    })


</script>
</body>
</html>